import store from "../store";
import {getPageNameOrVirtualPageName} from "./getPageName";
import getPageName from "./getPageName";
/**
 * 
 * @param {*} Vue 
 * @param {*} page 
 * @param {*} id 
 */
export function getPageTree (Vue, page = getPageName(), id) {
    // console.log("getPageNameOrVirtualPageName", page);
    // console.log("store.getters.getDomTree", store.getters.getDomTree);
    //根据页面值返回不同的组件对象列表
    let pageTree = store.getters.getDomTree[page];
    // console.log("根据页面值返回不同的组件对象列表", pageTree);
    if (id) {
        for (let key in pageTree) {
            if (key === "config") {
                continue;
            }
            for (let item of pageTree[key]) {
                if (item.id === id) {
                    //获取到了对应id的item
                    // console.log("获取到了对应id的item", item);
                    return item;
                }
            }
            // console.log("---------继续执行");
        }
    }
    let temp = {};
    for (let key in pageTree) {
        if (key === "config") {
            temp.config = pageTree[key];
            continue;
        }
        if (!temp[key]) {
            temp[key] = {};
        }
        Array.isArray(pageTree[key]) && pageTree[key].forEach(item => {
            if (!temp[key][item.type]) {
                temp[key][item.type] = [];
            }
            temp[key][item.type].push(item);
        })
    }
    // console.log("这是处理后的pageTree", temp);
    return temp;
}
/**
 * 根据虚拟DomTree渲染界面
 * @param {*} domTree 当前页面的domTree
 * @param {*} nodes 
 */
export function initDomTree(domTree, selectorObj = {}) {
    let _selectorObj = Object.assign({
        header: "#header-container", 
        content: "#content-container", 
        footer: "#footer-container"}, selectorObj
    );
    //做一个判断，只有当前页面的domTree发生改变的时候才会重新渲染页面
    //第一次进入页面默认渲染一次
    
    setTimeout(() => {
        //初始化选择器
        //header
        if (document.querySelectorAll(_selectorObj.header).length) {
            // if (window.environment === "production" 
            //     && store.getters.getFirstInitDom 
            //         && store.getters.getFirstInitDom.header === (getPageNameOrVirtualPageName() + "-header")) {
            //     return;
            // }
            // store.commit("setFirstInitDom", {header: getPageNameOrVirtualPageName() + "-header"});
            domSortUtil(document.querySelectorAll(_selectorObj.header)[document.querySelectorAll(_selectorObj.header).length - 1], domTree.header);
        }
        //content
        // console.log("before---开始渲染content部分", store.getters.getFirstInitDom.content === (getPageNameOrVirtualPageName() + "-content"));
        // console.log("before---开始渲染content部分", _selectorObj.content);
        // console.log("before---开始渲染content部分", document.querySelectorAll("#content-container"));
        // console.log("before---开始渲染content部分", document.querySelectorAll(_selectorObj.content));
        
        if (document.querySelectorAll(_selectorObj.content).length) {
            // console.log("开始渲染content部分");
            // if (window.environment === "production" 
            //     && store.getters.getFirstInitDom 
            //         && store.getters.getFirstInitDom.content === (getPageNameOrVirtualPageName() + "-content")) {
            //     return;
            // }
            // store.commit("setFirstInitDom", {content: getPageNameOrVirtualPageName() + "-content"});
            // console.log("initDomTree", document.querySelectorAll("#content-container")[document.querySelectorAll("#content-container").length - 1]);
            //判断一下这些组件有没有被禁用的（state==="0"），如果有则该次排序排除掉
            // console.log("判断一下这些组件有没有被禁用的");
            let domTreeContentFilter = [...domTree.content].filter(item => {
                return !item.config || item.config.state === undefined || item.config.state === "1";
            });
            
            domSortUtil(document.querySelectorAll(_selectorObj.content)[document.querySelectorAll(_selectorObj.content).length - 1], domTreeContentFilter);

        }
        //footer
        if (document.querySelectorAll(_selectorObj.footer).length) {
            // if (window.environment === "production" 
            //     && store.getters.getFirstInitDom 
            //         && store.getters.getFirstInitDom.footer === (getPageNameOrVirtualPageName() + "-footer")) {
            //     return;
            // }
            // store.commit("setFirstInitDom", {footer: getPageNameOrVirtualPageName() + "-footer"});
            domSortUtil(document.querySelectorAll(_selectorObj.footer)[document.querySelectorAll(_selectorObj.footer).length - 1], domTree.footer);
        }
    }, 0);
    
}

function domSortUtil(root, domTree) {
    // console.log("nihao,zaijian");
    // console.log("domSortUtil---domTree", domTree);
    let nodes = root.querySelectorAll("div[data-gwdrag]");
    // console.log("domSortUtil", root);
    // console.log("domSortUtil", nodes[0]);
    // console.log("domSortUtil---nodes", nodes);
    // return;
    if (!nodes.length) {
        return;
    }
    domSort(nodes, domTree);
}

function domSort(nodes, domTree) {
    let _shift = Array.prototype.shift;
    let _forEach = Array.prototype.forEach;
    let arr = [];
    let parentNode = nodes[0].parentNode;
    // console.log("parentNode", parentNode);
    let fragment = document.createDocumentFragment();
    // console.log("nodes", nodes);
    let domArray = new Array(nodes.length);
    // console.log("保存Dom结构的数组", domArray);
    //    console.log("排序用的domTree", domTree);
    domTree.forEach((item, index) => {
        // console.log(item.id);
        // console.log("这是找到的节点", parentNode.querySelector(`div[data-gwdrag=${item.id}]`));
        domArray[item.index] = parentNode.querySelector(`div[data-gwdrag=${item.id}]`);
    });
        //   console.log("保存Dom结构的数组", domArray);
    //    return;
    _forEach.call(nodes, item => {
        fragment.appendChild(item);
    });
    // console.log("节点", nodes);
    // console.log("fragment.children", fragment.children);
    // console.log("排序方法里的domTree", domTree);
    // return;
    fragment.innerHTML = "";
    domArray.forEach(item => {
        if (item) {
            fragment.appendChild(item);
        }
    });
    parentNode.appendChild(fragment);
}
